<style   scoped>


</style>
<template>
  <div >
      <!-- 合计<el-input v-model="valFee" disabled style="width:20%"></el-input>元 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="人员费、劳务费" name="first">
          <personnelService @changeTab='clickTabOne' :compile='compile' @change-valFee='changeValFeeOne' :dataList='dataList'></personnelService>
        </el-tab-pane>
        <el-tab-pane label="图书、材料购置费" name="second">
          <materialPurchase @changeTab='clickTabTow' :compile='compile' @change-valFee='changeValFeeTow' :dataList='dataList'></materialPurchase>
        </el-tab-pane>
        <el-tab-pane label="业务费" name="third">
          <operatingExpense @changeTab='clickTabSan' :compile='compile' @change-valFee='changeValFeeSan' :dataList='dataList'></operatingExpense>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import personnelService from './components/personnelService' // 人员费、劳务费
import materialPurchase from './components/materialPurchase'  // 图书、材料购置费
import operatingExpense from './components/operatingExpense' // 业务费
export default {
  components: {
    personnelService,
    materialPurchase,
    operatingExpense
  },
  props: {
      compile: {
          type: String,
          default: ''
      },
      dataList: {
          type: Object,
          default: () => {}
      }
    },
  data() {
    return {
      activeName: 'first',
      rules: {},
      dataList: [],
      valFee: 0,
      valFeeOne: null,
      valFeeTow: null,
      valFeeSan: null,
      dataOne: {
        list: []
      },
      dataTow: {
        list: []
      },
      dataSan: {
        list: []
      },
      queryForm: {}
    };
  },
  methods: {
    handleClick() {},
    clickTabOne(data) {
      this.dataOne = data
      this.changeClickDate()
    },
    clickTabTow(data) {
      this.dataTow = data
      this.changeClickDate()
    },
    clickTabSan(data) {
      this.dataSan = data
      this.changeClickDate()
    },
    changeValFeeOne(data) {
      this.valFeeOne = data
      this.calculatAmount()
    },
    changeValFeeTow(data) {
      this.valFeeTow = data
      this.calculatAmount()
    },
    changeValFeeSan(data) {
      this.valFeeSan = data
      this.calculatAmount()
    },
    calculatAmount() {
      // if (this.valFeeOne&&this.valFeeTow&&this.valFeeSan) {
        this.valFee = this.valFeeOne+this.valFeeTow+this.valFeeSan
        this.$emit('change-value', this.valFee)
      // }
    },
    changeClickDate() {
      // if (this.dataOne.list.length > 0 || this.dataTow.list.length > 0 || this.dataSan.list.length > 0) {
        this.$emit('changeTabe', this.dataOne, this.dataTow, this.dataSan)
      // } 
    }
  }
};
</script>